import React, { useRef, useState, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';

function GaugeChart({ data, forCOP }) {
    const echartsRef = useRef();
    let color = forCOP ? '#00b42a' : '#f53f3f';
    let seriesData = [
        // 最底层仪表盘
        {
            type: 'gauge',
            min: 0,
            max: 9,
            splitNumber: 9,
            radius: '64%',
            center:['50%', '47%'],
            axisLine: {
                lineStyle: {
                    color:[[1,'#1392cf']],
                    width: 2
                }
            },
            splitLine: {
                distance:0,
                length: 12,
                lineStyle: {
                    width:1,
                    color: 'rgba(255, 255, 255, 0.25)'
                }
            },
            axisTick: {
                distance:0,
                length: 6,
                lineStyle: {
                    width:1,
                    color: 'rgba(255, 255, 255, 0.25)'
                }
            },
            pointer:{ show:false },
            axisLabel:{
                show:true,
                distance:-30,
                color:'#fff',
                fontSize:16
            },
            title: {
                offsetCenter: [0, '30%'],
            },
            detail:{
                color:'#fff',
                fontWeight:'normal',
                offsetCenter:[0, '0%']
            },
            
        },
        // 中层仪表盘定义指针icon
        {
            type: 'gauge',
            min: 0,
            max: 9,
            splitNumber: 9,
            radius: '58%',
            center:['50%', '47%'],
            zlevel:1,
            axisLine:{ 
                lineStyle:{
                    width:12,
                    // 每一小格0.15
                    color:[[0.38, '#c00000'], [0.47, '#fffe01'], [0.55, '#00af50'], [1, '#21c7f9']]
                }
            },
            splitLine: { show:false },
            axisTick: { show:false },
            axisLabel:{ show:false },
            anchor:{ show:false },
            pointer: {
                // offsetCenter: [0, '-65%'],
                // icon:'path://M512 42.666667C252.288 42.666667 42.666667 252.288 42.666667 512s209.621333 469.333333 469.333333 469.333333 469.333333-209.621333 469.333333-469.333333S771.712 42.666667 512 42.666667z m0 611.712A142.890667 142.890667 0 0 1 369.621333 512 142.890667 142.890667 0 0 1 512 369.621333 142.890667 142.890667 0 0 1 654.378667 512 142.890667 142.890667 0 0 1 512 654.378667z',
                // keepAspect:true,
                width:6, 
                length:'80%',   
                itemStyle:{
                    color:'auto'
                }
            },
            detail:{
                fontSize:70,
                offsetCenter:['0', '0'],
                color:'#01d8ef',
                // fontFamily:'Microsoft YaHei',
                formatter:value=>value.toFixed(1)
            },
            title:{
                fontSize:26,
                color:'#01d8ef',
                offsetCenter:['0','76%']
            },
            data: [
                {
                    value: 4.0,
                    name: 'kw/kw',    
                }
            ]
        },
        // 利用柱状图构建图例
        {
            name:'优秀',
            type:'bar',
            data:[0],
            itemStyle:{ color:'#21c7f9' }
        },
        {
            name:'良好',
            type:'bar',
            data:[0],
            itemStyle:{ color:'#00af50' }
        },
        {
            name:'一般',
            type:'bar',
            data:[0],
            itemStyle:{ color:'#fffe01' }
        },
        {
            name:'改善',
            type:'bar',
            data:[0],
            itemStyle:{ color:'#c00000' }
        }
    ]
    return (
        <ReactEcharts
            notMerge={true}
            style={{ height: '100%' }}
            option={{
                grid: { 
                    z:1,    //grid作为柱状图的坐标系，其层级要和仪表图层级不同，同时隐藏
                    show:false,
                    left: '-30%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                    splitLine:{
                        show: false    //隐藏分割线
                    },
                },
                xAxis : [   //这里有很多的show，必须都设置成不显示
                    {
                        type : 'category',
                        data : [],
                        axisLine: {
                            show: false
                        },
                        splitLine:{
                            show: false
                        },
                        splitArea: {
                            interval: 'auto',
                            show: false
                        }
                    }
                ],
                yAxis : [ //这里有很多的show，必须都设置成不显示
                    {
                        type : 'value',
                        axisLine: {
                            show: false
                        },
                        splitLine:{
                            show: false
                        },
                    }
                ],
                legend:{
                    data:['优秀', '良好', '一般', '改善'],
                    top:6,
                    left:'center',
                    itemWidth:14,
                    itemHeight:14,
                    textStyle:{ color:'#fff' }
                },
                series: seriesData
            }}
        />
    )
}


export default React.memo(GaugeChart);